﻿@{
    ViewData["Title"] = "文章管理";
    Layout = "~/Areas/Manager/Views/Shared/_Layout.cshtml";
}
<script src="~/manager/js/jquery.min.js"></script>
<link href="~/manager/css/ztree/metroStyle.css" rel="stylesheet" />
<script src="~/manager/js/ztree/jquery.ztree.all.js"></script>

<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3">
            <div class="layui-card height-100">
                <div class="layui-card-header">
                    <p>栏目分类</p>
                </div>
                <div class="position-right">
                    <i class="layui-icon layui-icon-up " onclick="closeTree()" title="点击收缩" style="cursor:pointer"></i>
                    <i class="layui-icon layui-icon-down" onclick="expendTree()" title="点击展开" style="cursor:pointer"></i>
                </div>
                <div id="treeDemo" class="ztree">
                </div>
            </div>
        </div>

        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">栏目名称</div>
                <div class="layui-card-body">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <select id="status" name="status" lay-verify="required">
                                    <option value="">选择状态</option>
                                    <option value="0">发布</option>
                                    <option value="1">待发布</option>
                                    <option value="2">草稿</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <div class="input-group">
                                    <input type="text" id="keyWords" name="keyWords" lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                                    <span class="input-group-btn">
                                        <button class="layui-btn" id="search">
                                            <i class="layui-icon layui-icon-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-btn-container">
                            <div class="layui-btn-group">
                                <button type="button" id="loading-example-btn" class="layui-btn layui-btn-sm layui-bg-cyan" onclick="window.location.href = window.location.href"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
                                <button id="add" type="button" class="layui-btn   layui-btn-sm layui-bg-green"><i class="layui-icon layui-icon-add-circle-fine"></i>添加</button>
                                <button id="audit" type="button" class="layui-btn layui-btn-sm layui-bg-orange"><i class="layui-icon layui-icon-ok"></i>审核发布</button>
                                <button id="noAudit" type="button" class="layui-btn   layui-btn-sm layui-bg-blue"><i class="layui-icon layui-icon-close"></i>取消发布</button>
                                <button id="deleteAll" type="button" class="layui-btn  layui-btn-sm layui-bg-red"><i class="layui-icon layui-icon-delete"></i>删除</button>
                            </div>
                        </div>
                    </div>

                    <table class="layui-table" lay-data="{page:true, id:'list'}" lay-filter="list">
                        <thead>
                            <tr>
                                <th lay-data="{checkbox:true, fixed: true}"></th>
                                <th lay-data="{field:'contentId'}">ID</th>
                                <th lay-data="{field:'title',width:300}">标题</th>
                                <th lay-data="{field:'channelName',width:300}">所属栏目</th>
                                <th lay-data="{field:'pvCount',width:100}">浏览量</th>
                                <th lay-data="{field:'status',templet: '#state',width:100}">状态</th>
                                <th lay-data="{field:'sort',edit:'sequence',sort: true,width:100}">序号</th>
                                <th lay-data="{field:'createDate', sort: true,width:150}">发布时间</th>
                                <th lay-data="{toolbar:'#tableoption',width:180, fixed: 'right'}">操作</th>
                                
                            </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="tableoption">
                        <a class="layui-btn layui-btn-blue layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-close"></i> 删除</a>
                    </script>
                    <script type="text/html" id="state">
                        {{# if(d.status === 0){ }}
                        <span class="layui-badge layui-bg-green">已发布</span>
                        {{# }else if(d.status === 1){ }}
                        <span class="layui-badge layui-bg-orange">待发布</span>
                        {{# }else{ }}
                        <span class="layui-badge layui-bg-blue">草稿</span>
                        {{# } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

@section scriptsfeet
    {
<script type="text/javascript">
    var sykjwh, table;
        layui.config({
            base: '/layuiadmin/' //自定义模块路径
        }).use(['sykjwh', 'table', 'form'], function () {
            var $ = layui.$;
            sykjwh = layui.sykjwh;
            table = layui.table;

            //页面刷新时对树插件进行初始化
            $.fn.zTree.init($("#treeDemo"), treeDemo);

            //绑定数据
            sykjwh.dataBind('@Url.Action("ContentList", "cms", new {area = Constant.AREAMANAGER})');

            //添加
            $("#add").click(function () {
                sykjwh.openFull('添加文章', '@Url.Action("contentadd", "cms", new {area = Constant.AREAMANAGER})');
            });

            //审核
            $("#audit").click(function () {
                sykjwh.batOperate('@Url.Action("contentaudit", "cms", new {area = Constant.AREAMANAGER})', 'contentId');
            });

            //批量删除
            $("#deleteAll").click(function () {
                sykjwh.batOperate('@Url.Action("deleteall", "cms", new { area = Constant.AREAMANAGER })', 'contentId');
            });

            //审核不通过
            $("#noAudit").click(function () {
                sykjwh.batOperate('@Url.Action("contentnoaudit", "cms", new {area = Constant.AREAMANAGER})', 'contentId');
            });

            //监听表格行
            table.on('tool(list)', function (obj) {
                var data = obj.data; //获得当前行数据
                if (obj.event === 'edit') {
                    sykjwh.openFull('编辑文章', '@Url.Action("contentedit", "cms", new {area = Constant.AREAMANAGER})/' + data.contentId);
                } else if (obj.event === 'del') {
                    sykjwh.operate("@Url.Action("contentdel", "cms", new {area = Constant.AREAMANAGER})/" +data.contentId);
                }
            });

            //监听单元格编辑
            table.on('edit(list)', function (obj) {
                var value = obj.value, //得到修改后的值
                    data = obj.data, //得到所在行所有键值
                    field = obj.field; //得到字段
                sykjwh.request("@Url.Action("contentmodify", "cms", new { area = Constant.AREAMANAGER })?contentId=" +data.contentId +"&sort=" +value +"&field=" +field,"POST");
            });

            //表格排序
            table.on('sort(list)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                sykjwh.dataBind('@Url.Action("contentlist", "cms", new {area = Constant.AREAMANAGER})', {
                    sortField: obj.field, //排序字段
                    sortType: obj.type //排序方式
                });
            });

            //搜索
            $("#search").click(function () {
                //绑定数据
                sykjwh.dataBind('@Url.Action("contentlist", "cms", new {area = Constant.AREAMANAGER})', {
                    keyWords: $.trim($("#keyWords").val()),
                    status: $.trim($("#status").val())
                }, true);
            });
        });


        //设置树插件的各种参数
        var treeDemo = {
            async: {
                //是否开启异步请求
                enable: true,
                url: "@Url.Action("GetChannelTreeList", "cms", new {area = Constant.AREAMANAGER})"
            },
            data: {
                //简单数据格式
                simpleData: {
                    enable: true
                }
            },
            //回调事件
            callback: {
                //点击事件
                onClick: function(event, treeId, treeNode) {
                    sykjwh.dataBind('@Url.Action("contentlist", "cms", new {area = Constant.AREAMANAGER})',{channelId: treeNode.id},true);
                },
                onAsyncSuccess: function(event, treeId, treeNode, msg) { //异步成功回调
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    treeObj.expandAll(false); //关闭全部节点
                    var nodes = treeObj.getNodes(); 
                    treeObj.expandNode(nodes[0],true,false,false,false) //打开一级节点
                }
            }
        };

        function expendTree() {
            var tree = $.fn.zTree.getZTreeObj("treeDemo");
            tree.expandAll(true);
        }

        function closeTree() {
            //debugger;
            var tree = $.fn.zTree.getZTreeObj("treeDemo");
            /* tree.expandAll(false); */  // 该方法执行效果与下面循环判断执行方法效果相同
            var nodes = tree.transformToArray(tree.getNodes());
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].level === 0) {// level属性 初始化节点数据时，有zTree增加此属性，请勿提前赋值
                    tree.expandNode(nodes[i], false, true, false);
                } else {
                    tree.expandNode(nodes[i], false, true, false);
                }
            }
        }
</script>
}
